<script lang="ts" setup>
import fish from '@/assets/images/home/gold-fish.png';
import shark from '@/assets/images/home/shark.png';

import { CountTo } from 'vue3-count-to';

import { protocolDataApi } from '@/api/home';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const mining = ref<number>(0);
const members = ref<number>(0);
const holders = ref<number>(0);
const votes = ref<number>(0);

protocolDataApi().then((res: any) => {
  console.log('getProtocolDataApi:', res);
  mining.value = res.sdaoMining;
  members.value = res.sdaoMembers;
  holders.value = res.holders;
  votes.value = res.votes;
});
</script>

<template>
  <div class="protocol-wrapper flex">
    <div
      class="protocol-container relative align-self-center flex-1 flex"
      ata-aos="flip-left"
      data-aos-easing="ease-out-cubic"
      data-aos-duration="200"
    >
      <div class="protocol-title">{{ t('message.home.protocol.title') }}</div>
      <div class="protocol-list flex-1">
        <div class="protocol-item">
          <div class="protocol-item-label">
            {{ t('message.home.protocol.subtitle') }}
          </div>
          <div class="protocol-item-num">
            <count-to :start-val="0" :end-val="mining" :duration="3000" />
          </div>
        </div>
        <div class="protocol-item ml-20 sm:ml-0 md:ml-0 xs:ml-0">
          <div class="protocol-item-label">
            {{ t('message.home.protocol.member') }}
          </div>
          <div class="protocol-item-num">
            <count-to :start-val="0" :end-val="members" :duration="3000" />
            <span>+</span>
          </div>
        </div>
        <div class="protocol-item">
          <div class="protocol-item-label">
            {{ t('message.home.protocol.guardian') }}
          </div>
          <div class="protocol-item-num">
            <count-to :start-val="0" :end-val="holders" :duration="3000" />
          </div>
        </div>
        <div class="protocol-item ml-20 sm:ml-0 md:ml-0 xs:ml-0">
          <div class="protocol-item-label">
            {{ t('message.home.protocol.vote') }}
          </div>
          <div class="protocol-item-num">
            <count-to :start-val="0" :end-val="votes" :duration="3000" />
            <span>+</span>
          </div>
        </div>
      </div>

      <img :src="fish" class="fish float-animation" alt="" />
      <img :src="shark" class="shark float-animation" alt="" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.protocol-container {
  padding: 142px 72px;
  background: #ffffff;
  border-radius: 32px;
  border: 1px solid #bed4ff;
  z-index: 99;

  margin-bottom: 162px;
  @apply flex-row xs:w-full sm:mx-[100px] md:mx-[180px] lg:mx-[208px] xl:mx-[228px] sm:px-[82px] xs:px-[16px] xs:py-[32px] xs:flex-col xs:mb-[50px] xs:mt-[-40px] mt-[-142px] xs:z-[99] xs:mx-6;

  .protocol-title {
    width: 242px;
    font-size: 54px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #161615;
    line-height: 60px;

    @apply sm:mr-[60px] md:mr-[80px] lg:mr-[100px] xl:mr-[86px] xs:w-full xs:text-[30px];
  }

  .protocol-list {
    @apply grid grid-cols-2 md:grid-cols-1 sm:grid-cols-1 xs:grid-cols-2 grid-rows-2 gap-x-0 xs:gap-x-[32px] xl:gap-y-[232px] lg:gap-y-[202px] md:gap-y-[12px] sm:gap-y-[12px];

    .protocol-item {
      .protocol-item-label {
        //font-size: 26px;
        font-family: DINPro-Regular, DINPro;
        font-weight: 400;
        color: #7a7893;
        margin-bottom: 10px;

        @apply text-[26px] lg:text-[20px] sm:text-sm md:text-base xs:text-[16px];
      }

      .protocol-item-num {
        //font-size: 88px;
        font-family: DINPro-Regular, DINPro;
        font-weight: 400;
        color: #161615;

        @apply text-[88px] lg:text-[40px] sm:text-[22px] md:text-[32px] xs:text-[24px];
      }
    }
  }

  .fish {
    @apply absolute top-[390px] left-[-70px] sm:w-[120px] sm:h-[104px] xs:hidden;
  }

  .shark {
    @apply absolute bottom-[-56px] right-[-118px] sm:w-[278px] sm:h-[220px] xs:hidden;
  }
}
</style>
